<template>
  <div>
    <header>
      <img class="cageback" :src="headImg1" @click="photoback"/>
      <img class="cagehead" :src="headImg2"/>
    </header>
    <main class="cagemain">
      <h3>搭乘飞机以及时光机探索台湾零食</h3>
      <p class="firstmain">作者：抽风的小清晰  |  4天前</p>

      <p>经典的零食不但好吃，更是跨时代的共同语言。</p>
      <p> 而提起经典零食，绝不能错过一些台湾老字号品牌，</p>
      <p>
        乖乖、可乐果、孔雀饼干。
      </p>
      <p>
        现在，就让我们先搭乘飞机到台湾，再做时光机，一起去探究那些台湾经典零食吧。
      </p>
      <p>
        陪伴了台湾半个世纪的品牌--乖乖
      </p>
      <p>
        1968年诞生的乖乖，明年就满50岁了。
      </p>
      <img src="../../static/img/cagephoto1.png"/>
      <p>奶油椰子口味：浓浓椰子的香甜味，酥松爽脆，是乖乖系列中最受欢迎之一的口味</p>
      <img src="../../static/img/cagephoto2.png"/>
      <p>五香口味也是乖乖家族的台柱，</p>
      <p>有着酱香和五香粉的味道,</p>
      <p>咸香口感超涮嘴</p>
      <p>黄色的乖乖，就像金元宝</p>
      <img src="../../static/img/cagephoto3.png"/>
      <p>当然还有--乖乖软糖</p>
      <p>乖乖软糖也很受欢迎。</p>
      <p>果冻色的软糖，看起来晶莹剔透。</p>
      <p> 大人也不会放过的口味，</p>
      <p>集合了六种水果口味！</p>
      <p>综艺电影节目好朋友--可乐果</p>
      <img src="../../static/img/cagephoto4.png"/>
      <p>可乐果也算台湾零食界的元老级。</p>
      <p>最早只有蒜香口味，后来陆续推出了酷辣、</p>
      <p>北海道起司、芥末口味、九层塔等，</p>
      <p>一口一口根本停不下来</p>
      <p>咬在嘴里会卡擦卡擦响的--宝咔咔</p>
      <img src="../../static/img/cagephoto5.png"/>
    </main>
    <footer>
      <input type="text" placeholder="添加评论"/>
      <ul class="cagefoot">
        <li>
          <img src="../../static/img/photoicon1.png"/> 0
        </li>
        <li>
          <img src="../../static/img/photoicon2.png"/> 0
        </li>
        <li>
          <img src="../../static/img/photoicon3.png"/> 0
        </li>
      </ul>
    </footer>
  </div>
</template>
<script>
  export default{
      name:'cgphoto1',
      data(){
          return{
            headImg1:'../../static/img/photoback.png',
            headImg2:'../../static/img/cageHot.png',
          }
      },
    methods:{
      photoback(){
          this.$router.go(-1)
      }
    }
  }
</script>
<style scoped lang="less">
  @import'../assets/css/reset.css';
 // @import'../assets/css/cagephoto.less';
  *{margin:0;padding:0}
  li{list-style:none}
  a{text-decoration: none}
  body,html{
    width:100%;
    height:100%;
    background:#f7f7f7;
  }
  .box{
    display:flex;
    display:inline-flex;
  }
  .px2rem(@name,@px){
      @{name}:@px / 75 * 1rem;
  }
  .w(@age1){
    .px2rem(width,@age1);
  }

  .h(@age1){
    .px2rem(height,@age1);
  }

  .p-top(@top){
    .px2rem(padding-top,@top)
  }

  .p-right(@right){
    .px2rem(padding-right,@right);
  }

  .p-bottom(@bottom){
    .px2rem(padding-bottom,@bottom);
  }
  .p-left(@left){
    .px2rem(padding-left,@left);
  }

  .m-top(@top){
    .px2rem(margin-top,@top);
  }
  .m-right(@right){
    .px2rem(margin-right,@right);
  }
  .m-bottom(@bottom){
    .px2rem(margin-bottom,@bottom);
  }
  .m-left(@left){
    .px2rem(margin-left,@left);
  }

  .cageback{
    position: absolute;
    left: 40px;
    top: 60px;
  }
  .cagehead{
    width: 100%;
  }
  .cagemain{
    .m-top(48)
  }
  .cagemain h3{
    font-size: 28px;
    text-align: center;
    color: #1e170d;
    font-weight: 800;
  }
  .cagemain .firstmain{
    text-align: center;
    font-size: 24px;
    color: #1e170d;
    font-weight: 800;
  }
  .cagemain p{
    font-size: 32px;
    line-height: 74px;
    color: #060606;
    font-weight: 600;
  }
  .cagemain img{
    width: 100%;
  }
  .cagefoot{
    .box();
    .m-top(10);
    .m-bottom(10);
    position: static;
  }
  .cagefoot li{
    .m-left(30)
  }
</style>
